<template>
	<view class="time-line-wrap">
		<view class="time-line">
			<!-- 标题 -->
			<view class="time-line-title">
				{{title}}
			</view>
			<!-- 时间轴 -->
			<view class="time-line-container" :class="[addTypeClass()]">
				<!-- 时间轴内容块列表 -->
				<view class="time-line-list">

					<!-- 时间轴内容块 -->
					<view class="time-line-info" :key="index" :class="[layoutClass(index)]" :id="'timeline'+item._id"
						v-for="(item,index) of list">
						<!-- 内容块内容 -->
						<view class="line-info-content" @longpress="onLongpress(item)" @touchend="touchEnd"
							@touchmove="touchMove">

							<!-- 时间轴圆点 -->
							<view class="line-on-round"
								:style="{ opacity: current[index]&&current[index].is=='ok'?1:0,top:'130rpx'}"
								:class="current[index]&&current[index].is=='ok'?comeani:''"></view>

							<view class="info-content-wrap"
								:style="{ opacity: current[index]&&current[index].is=='ok'?1:0}"
								:class="current[index]&&current[index].is=='ok'?comeani:''">
								<!-- 标题 -->
								<view class="info-title">
									<view>
										{{$u.timeFormat(item.dateTime,'yyyy-mm-dd hh:MM')}}
									</view>
									<view class="title-author">
										{{item.author}}
									</view>
								</view>

								<!-- 内容 -->
								<view class="info-content">
									<!-- 内容 -->
									<view class="info-txt">{{item.content}}</view>
									<view class="info-images-box">
										<view class="info-image" @tap="onPreviewMedia(item.images,imageIndex)"
											v-for="(imageItem,imageIndex) in item.images" :key="imageIndex">
											<image style="width: 90rpx;height: 90rpx;"
												:src="imageItem.type==='video'?imageItem.poster:imageItem.url" />
											<view class="info-image-play" v-if="imageItem.type==='video'">
												<view style="display: inline-block;align-self: center;">
													<u-icon name="play-right-fill" color="#fafafa" size="20" />
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<u-loadmore v-if="isLoadmore" status="loading" height="60rpx" />

		<drag-button :isDock="true" backgroundColor="#3787ff" @btnClick="onEdit()">
			<u-icon name="edit-pen" color="#fff" size="25" />
		</drag-button>

		<u-back-top :scrollTop="scrollTop" icon="arrow-up" customStyle="background-color: #e6e6e6;" />

		<u-action-sheet :actions="actionSheet" :show="showActionSheet" cancelText="取消" @close="showActionSheet=false"
			@select="onActionSelect" closeOnClickOverlay safeAreaInsetBottom />

	</view>
</template>

<script>
	import dragButton from '@/components/myCustom/drag-button'
	export default {
		components: {
			dragButton
		},
		data() {
			return {
				scrollTop: 0,
				operationItem: null,
				// 数据
				list: [],
				HEIGHT: 0, //屏幕高度
				result: [], //监听的结果
				current: [], //当前在屏幕内的
				sum: 0, //加载完成个数
				comeani: 'come-ani', //入场动画
				isScroll: true, //是否加载动画
				location: 'center',
				title: '恋爱时间线',
				currentPage: 1, //当前页数
				pageSize: 10, //每页数据条数
				totalData: 1, //数据总数
				isLongtap: false,
				isLoadmore: false,
				showActionSheet: false,
				actionSheet: [{
					name: '修改',
					value: 0
				}, {
					name: '删除',
					value: 1
				}, ],
			}
		},
		onLoad() {
			this.init()
			this.onList()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onReachBottom() {
			this.onList()
		},
		methods: {
			onList() {
				if (this.totalData > this.list.length && this.vuex_user.configId) {
					this.isLoadmore = true
					this.$http.get("/timeLine/page", {
						partnerConfigId: this.vuex_user.configId,
						page: this.currentPage,
						size: this.pageSize
					}).then((res) => {
						let data = res.data
						let addList = data.records
						this.list.push(...addList)
						this.totalData = data.total
						this.updateTimeLine(addList)
						this.currentPage += 1
						this.isLoadmore = false
					}).catch((err) => {
						this.isLoadmore = false
					})
				}
			},
			onEdit(id) {
				uni.navigateTo({
					url: 'editTimeLine/editTimeLine' + (id ? '?id=' + id : '')
				});
			},
			onActionSelect(e) {
				this.showActionSheet = false
				if (e.value === 0) {
					this.onEdit(this.operationItem.id)
				} else if (e.value === 1) {
					let formatDate = uni.$u.timeFormat(this.operationItem.dateTime, 'yyyy-mm-dd hh:MM')
					uni.showModal({
						title: "提示",
						content: `确定要删除${formatDate}时间片段吗？`,
						success: (res) => {
							if (res.confirm) {
								uni.showLoading({
									title: '删除中',
									mask: true
								});
								this.$http.post("/timeLine/delete", {
									id: this.operationItem.id
								}).then((res) => {
									const index = this.list.findIndex(item => item.id === this.operationItem.id)
									if (index >= 0) this.list.splice(index, 1)
									uni.hideLoading();
									uni.$u.toast('删除成功')
								}).catch(err => {
									uni.hideLoading();
									uni.$u.toast(err.message)
								})
							}
						}
					});
				}
			},
			onPreviewMedia(images, index) { // 预览图片，微信内可以预览视频
				wx.previewMedia({
					sources: images,
					current: index,
					fail() {
						uni.$u.toast('预览失败')
					},
				});
			},
			onLongpress(item) { //长按事件
				this.operationItem = item
				this.isLongtap = true;
			},
			touchEnd() { // 手指触摸结束事件
				if (this.isLongtap) {
					this.isLongtap = false;
					this.showActionSheet = true
				}
			},
			touchMove() { // 手指触摸后的移动事件
				this.isLongtap = false;
			},
			init() {
				try {
					// 获取屏幕高度
					const res = uni.getSystemInfoSync();
					this.HEIGHT = res.screenHeight;
				} catch (e) {
					// error
				}
			},
			updateTimeLine(addList) {
				// 添加标志位
				for (let i = 0; i < addList.length; i++) {
					this.current.push({
						tag: 'timeline' + addList[i]._id,
						is: 'ok'
					});
				}
				setTimeout(() => {
					// 开始获取位置信息
					this.getScroll(addList);
				}, 100);
			},
			addTypeClass() {
				let _class = "";
				let arrType = ["left", "right", "center"];
				if (arrType.indexOf(this.location) !== -1 && this.location !== 'center') {
					_class += this.location + "-time-line";
				}
				return _class;
			},
			loadingAnimation(addList) {
				for (let i = 0; i < this.result.length; i++) {
					for (let j = 0; j < this.result[i].info.length; j++) {
						// 是否没加载动画
						if (this.current[j].is != 'ok') {
							// 是否进入视野
							if (this.current[j].tag == this.result[i].info[j].tag &&
								this.result[i].info[j].domTop + 90 < this.HEIGHT) {
								// 加载动画
								this.current[j].is = 'ok';
								// this.sum = j + 1;
							}
						}
					}
					// 移除当前
					this.result.splice(i, 1);
				}
				// 是否全部加载完成
				// if (this.sum == addList.length) {
				// 	this.isScroll = false;
				// }
			},
			getScroll(addList) {
				// if (!this.isScroll) {
				// 	return;
				// }
				let info = [],
					id
				// 返回位置信息加入数组
				const query = uni.createSelectorQuery();
				for (let i = 0; i < addList.length; i++) {
					id = addList[i]._id
					query.select('#timeline' + id).boundingClientRect(data => {
						info.push({
							domInfo: data.height,
							domTop: data.top,
							tag: id
						});
					}).exec();
				}
				this.result.push({
					info: info
				});
				// 加载动画
				this.loadingAnimation(addList);
			},
			// 添加动画
			layoutClass(index) {
				let _class = "";
				if (this.location == 'center' && index % 2 != 0) {
					_class = 'right-info';
				}
				return _class;
			}
		},
	}
</script>

<style lang="scss">
	.time-line-wrap {
		width: 100%;
		overflow-x: hidden;
	}

	.time-line-wrap {
		font-family: sans-serif;

		.time-line {
			padding: 4% 1%;

			.time-line-title {
				font-size: 25px;
				font-weight: 800;
				text-align: center;
				margin-bottom: 15px;
			}

			// 中间的轴
			.time-line-container {
				padding: 3% 1%;
				position: relative;

				&::before {
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					margin: 0 auto;
					height: 100%;
					width: 4px;
					background: #1177dd;
				}

				.time-line-list {
					width: 100%;

					.time-line-info {
						position: relative;

						.line-info-content {
							will-change: auto;
							width: 43%;
							display: flex;
							flex-direction: column;

							.line-on-round {
								height: 20px;
								width: 20px;
								border: 4px solid #1177dd;
								border-radius: 50%;
								background: #fff;
								position: absolute;
								left: 0;
								right: 0;
								margin: 0 auto;
								top: 50px;
								box-shadow: 0px 2px 1px 1px rgba(0, 0, 0, .1);
								z-index: 10;

								&.come-ani {
									animation: come-round .8s ease-in-out;
								}
							}

							.info-content-wrap {
								position: relative;

								.info-title {
									min-height: 30px;
									word-break: break-word;
									text-align: right;
									margin: 5px 0;
									font-size: 34rpx;
									font-weight: 500;

									.title-author {
										color: #1177dd;
										font-size: 38rpx;
										font-weight: 600;
										padding-left: 3px;
									}

								}

								.info-content {
									box-shadow: 1px 1px 1px 1px #d7e4ed;
									border-radius: 10px;
									padding: 5px;
									min-height: 40px;
									position: relative;

									.info-txt {}

									&::before {
										content: '';
										border: 7px solid;
										border-color: transparent transparent transparent #aaa;
										position: absolute;
										left: 100%;
										top: 30rpx;
									}
								}

								.info-images-box {
									margin-top: 20rpx;

									.info-image {
										display: inline-block;
										position: relative;
										width: 90rpx;
										height: 90rpx;
										margin-right: 1px;
										border: 1px solid #d7e4ed;
									}

									.info-image-play {
										display: flex;
										justify-content: center;
										width: 100%;
										height: 100%;
										position: absolute;
										top: 0;
										left: 0;
										background-color: rgba(0, 0, 0, .25);
									}
								}

								&.come-ani {
									animation: come-in-left .6s ease-in-out;
								}
							}
						}
					}

					.right-info {
						transform: rotateY(180deg);

						.line-info-content {
							.info-content-wrap {
								.info-title {
									transform: rotateY(180deg);
									text-align: left;
								}

								.info-content {
									.info-txt {
										transform: rotateY(180deg)
									}
								}
							}
						}
					}
				}
			}

			// // 轴在左边
			// .left-time-line {
			// 	&::before {
			// 		margin: 0;
			// 		left: 15px;
			// 	}

			// 	.time-line-list {
			// 		.time-line-info {
			// 			.line-info-content {
			// 				width: auto;

			// 				.line-on-round {
			// 					left: 0;
			// 					margin: 0;
			// 				}

			// 				.info-content-wrap {
			// 					margin-left: 45px;
			// 					margin-bottom: 15px;

			// 					.info-title {
			// 						text-align: left;
			// 					}

			// 					.info-content {
			// 						&::before {
			// 							border-color: transparent #aaa transparent transparent;
			// 							left: -15px;
			// 						}
			// 					}

			// 					&.come-ani {
			// 						animation: come-in-right .6s ease-in-out;
			// 					}
			// 				}
			// 			}
			// 		}
			// 	}
			// }

			// // 轴在右边
			// .right-time-line {
			// 	&::before {
			// 		margin: 0;
			// 		left: 92.8%;
			// 	}

			// 	.time-line-list {
			// 		.time-line-info {
			// 			.line-info-content {
			// 				width: auto;

			// 				.line-on-round {
			// 					left: 90%;
			// 					margin: 0;
			// 				}

			// 				.info-content-wrap {
			// 					margin-right: 55px;
			// 					margin-bottom: 15px;

			// 					.info-content {
			// 						&::before {
			// 							border-color: transparent transparent transparent #aaa;
			// 						}
			// 					}

			// 				}
			// 			}
			// 		}
			// 	}
			// }
		}
	}

	@keyframes come-in-left {
		0% {
			transform: translateX(-120%);
		}

		70% {
			transform: translateX(8%);
		}

		100% {
			transform: translateX(0);
		}
	}

	@keyframes come-in-right {
		0% {
			transform: translateX(120%);
		}

		70% {
			transform: translateX(-8%);
		}

		100% {
			transform: translateX(0);
		}
	}

	@keyframes come-round {
		0% {
			transform: scale(0);
			opacity: 0;
		}

		40% {
			opacity: 0;
		}

		60% {
			transform: scale(1.2);
		}

		100% {
			transform: scale(1);
		}
	}
</style>